<!DOCTYPE html>
<html lang="zh-CN">
  <head>
	<?php require APP_PATH_WEB_ANLS.'Report/common/web_doc_meta.php';?>
    <title>配置</title>
    <?php require APP_PATH_WEB_ANLS.'Report/common/web_doc_link.php';?>
    <?php require APP_PATH_WEB_ANLS.'Report/common/web_doc_script.php';?>
    <script src="/Public/js/echarts.js"></script>
	<style>
        #dataView {display: none; position: absolute;z-index:9999999;background-color: border: 1px solid #f9f9f9; background-color: white;
            padding: 5px;
           }
        .tr_bg_red { background-color: #c52d2d !important; color: white !important;}
    </style>

    <script type="text/javascript">

    
    
    // 数据意义：开盘(open)，收盘(close)，最低(lowest)，最高(highest)

    function splitData(rawData) {
        var categoryData = [];
        var values = [];
        var volumes = [];
        for (var i = 0; i < rawData.length; i++) {
            categoryData.push(rawData[i].splice(0, 1)[0]);
            values.push(rawData[i]);
            volumes.push([i, rawData[i][4], rawData[i][0] > rawData[i][1] ? 1 : -1]);
        }

        return {
            categoryData: categoryData,
            values: values,
            volumes: volumes
        };
    }

    function calculateMA(dayCount, data) {
        
        var result = [];
        for (var i = 0, len = data.values.length; i < len; i++) {
            if (i < dayCount) {
                result.push('-');
                continue;
            }
            var sum = 0;
            for (var j = 0; j < dayCount; j++) {
                var _val = +(data.values[i - j][1]);
                sum += _val;
            }
            result.push(+(sum / dayCount).toFixed(3));
        }
        return result;
    }

	function setOption(kdata){
		var data = splitData(kdata);
		option = {
		        backgroundColor: '#21202D',
		        animation: false,
		        legend: {
		            bottom: 10,
		            left: 'center',
		            inactiveColor: '#777',
		            data: ['均线', 'MA5', 'MA10', 'MA20', 'MA30']
		        },
		        tooltip: {
		        	 trigger: 'axis',
		             axisPointer: {
		                 animation: false,
		                 type: 'cross',
		                 lineStyle: {
		                     color: '#376df4',
		                     width: 2
		                 }
		             }
		        },
		        axisPointer: {
		            link: {xAxisIndex: 'all'},
		            label: {
		                backgroundColor: '#777'
		            }
		        },
		        toolbox: {
		            feature: {
		                dataZoom: {
		                    yAxisIndex: false
		                },
		                brush: {
		                    type: ['lineX', 'clear']
		                }
		            }
		        },
		        visualMap: {
		            seriesIndex: 5,
		            dimension: 2,
		            pieces: [{
		                value: 1,
		                color: '#54FFFF'
		            }, {
		                value: -1,
		                color: '#FF3232'
		            }]
		        },
		        grid: [
		            {
		                left: '10%',
		                right: '8%',
		                height: '50%'
		            },
		            {
		                left: '10%',
		                right: '8%',
		                top: '63%',
		                height: '16%'
		            }
		        ],
		        xAxis: [
		            {
		                type: 'category',
		                data: data.categoryData,
		                scale: true,
		                boundaryGap : false,
		                axisLine: {
			                onZero: false
			                ,lineStyle: { color: '#8392A5' }
			            },
		                splitLine: {show: false},
		                splitNumber: 20,
		                min: 'dataMin',
		                max: 'dataMax',
		                axisPointer: {
		                    z: 100
		                }
		            },
		            {
		                type: 'category',
		                gridIndex: 1,
		                data: data.categoryData,
		                scale: true,
		                boundaryGap : false,
		                axisLine: {
			                onZero: false
			                ,lineStyle: { color: '#8392A5' }
			            },
		                axisTick: {show: false},
		                splitLine: {show: false},
		                axisLabel: {show: false},
		                splitNumber: 20,
		                min: 'dataMin',
		                max: 'dataMax',
		                axisPointer: {
		                    label: {
		                        formatter: function (params) {
		                            var seriesValue = (params.seriesData[0] || {}).value;
		                            return params.value
		                            + (seriesValue != null
		                                ? '\n' + echarts.format.addCommas(seriesValue)
		                                : ''
		                            );
		                        }
		                    }
		                }
		            }
		        ],
		        yAxis: [
		            {
		                scale: true,
		                splitArea: {
		                    show: false
		                },
		                splitLine: {
							lineStyle : {
								width:1,
								type:'dotted',
								opacity : 0.5
							}
			            },
		                axisLine: { lineStyle: { color: '#8392A5' } },
		            },
		            {
		                scale: true,
		                gridIndex: 1,
		                splitNumber: 2,
		                axisLabel: {show: false},
		                axisLine: {show: false},
		                axisTick: {show: false},
		                axisLine: { lineStyle: { color: '#8392A5' } },
		                splitLine: {show: false}
		            }
		        ],
		        dataZoom: [{
		                type: 'inside',
		                xAxisIndex: [0, 1],
		                textStyle: {
		                    color: '#8392A5'
		                },
		                start: 98,
		                end: 100
		            },
		            {
		                show: true,
		                textStyle: {
		                    color: '#8392A5'
		                },
		                xAxisIndex: [0, 1],
		                type: 'slider',
		                top: '85%',
		                start: 98,
		                dataBackground: {
		                    areaStyle: {
		                        color: '#8392A5'
		                    },
		                    lineStyle: {
		                       
		                        color: '#8392A5'
		                    }
		                },
		                handleStyle: {
		                    color: '#fff',
		                    shadowBlur: 3,
		                    shadowColor: 'rgba(0, 0, 0, 0.6)',
		                    shadowOffsetX: 2,
		                    shadowOffsetY: 2
		                },
		                end: 100
		            }
		        ],
		        series: [
		            {
		                name: '日K线',
		                type: 'candlestick',
		                data: data.values,
		                itemStyle: {
		                    normal: {
		                    	color: '#21202D',
		                        color0: '#54FFFF',
		                        borderColor: '#FF3232',
		                        borderColor0: '#54FFFF'
		                    }
		                },
		                tooltip: {
		                    formatter: function (param) {
		                        param = param[0];
		                        return [
		                            'Date: ' + param.name + '<hr size=1 style="margin: 3px 0">',
		                            'Open: ' + param.data[0] + '<br/>',
		                            'Close: ' + param.data[1] + '<br/>',
		                            'Lowest: ' + param.data[2] + '<br/>',
		                            'Highest: ' + param.data[3] + '<br/>'
		                        ].join('');
		                    }
		                }
		            },
		            {
		                name: 'MA5',
		                type: 'line',
		                data: calculateMA(5, data),
		                smooth: true
		            },
		            {
		                name: 'MA10',
		                type: 'line',
		                data: calculateMA(10, data),
		                smooth: true
		            },
		            {
		                name: 'MA30',
		                type: 'line',
		                data: calculateMA(30, data),
		                smooth: true
		            },
		            {
		                name: 'MA60',
		                type: 'line',
		                data: calculateMA(60, data),
		                smooth: true
		            },
		            {
		                name: 'Volume',
		                type: 'bar',
		                xAxisIndex: 1,
		                yAxisIndex: 1,
		                data: data.volumes
		            }
		        ]
		    }
	}

	var curAutoCode = null;
	function autoView(){
    	$.ajax({
    		url:'/Anls/report/getChartAutoView'
    		,dataType:'json'
    		,success:function(data){
    			if(!data) return false;
    			if(data.code){
    				if(curAutoCode == null || curAutoCode != data.code){
    					$("#codeView").html(data.code);
    					$("#code").val(data.code);
    					showChart(data.code);
    					curAutoCode = data.code;
    				}
    			}
    		}
    	});
    	
    	window.setTimeout(function(){
    		autoView();
		},500);
	}

	function showChart(code){
		code = code || '000001';
		$.ajax({
			url:'/Anls/kline/getData?code='+code
			,dataType:'json'
			,success:function(data){
				if(!data) return false;
				var dataArr = [];
				for(var i=0;i<data.length;i++){
					var _data = data[i];
					var arr = [];
					arr[0] = _data['date'];
					arr[1] = _data['open'];
					arr[2] = _data['close'];
					arr[3] = _data['low'];
					arr[4] = _data['high'];
					arr[5] = _data['vol'];
					dataArr.push(arr);
				}
				setOption(dataArr);
				var oKlineChart = echarts.init(document.getElementById('kline'));
				oKlineChart.setOption(option, true);
				
			}
		});
	}

		$(function(){
		    autoView();
		});
    </script>
  </head>

  <body>
    <?php require APP_PATH_WEB_ANLS.'Report/common/nav.php';?>
    <div class="container-fluid">
      <div class="row">
        <?php require APP_PATH_WEB_ANLS.'Report/common/sidebar.php';?>
        
          <h2 class="sub-header" id="codeView"></h2>
          <div id="kline" style="width: 1150px;height:700px; margin-top:10px;"></div>
          
          
        </div>
      </div>
      
    </div><!-- end main -->

  </body>
</html>
